@extends('layouts.default')
@section('seo-title', $data['seo_title'] ?$data['seo_title'] : $seo['seo_title'])
@section('seo-description',$data['seo_description'] ? $data['seo_description'] : $seo['seo_description'])
@section('seo-keywords',$data['seo_keyword'] ?$data['seo_keyword']: $seo['seo_keyword'])
@section('company',$all_model['abbreviation'])
<style>
    .black_overlay {
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 1001;
        -moz-opacity: 0.8;
        opacity: .80;
        filter: alpha(opacity=88);
    }

    .white_content {
        display: none;
        position: absolute;
        top: 35%;
        left: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        width: auto;
        height: auto;
        padding: 20px;
        border: 1px black;
        background-color: white;
        z-index: 1002;
        overflow: auto;
    }

    .login-button { /* 按钮美化 */
        width: 270px; /* 宽度 */
        height: 40px; /* 高度 */
        border-width: 0px; /* 边框宽度 */
        border-radius: 3px; /* 边框半径 */
        background: #1E90FF; /* 背景颜色 */
        cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
        outline: none; /* 不显示轮廓线 */
        font-family: Microsoft YaHei; /* 设置字体 */
        color: white; /* 字体颜色 */
        font-size: 17px; /* 字体大小 */
    }

    .login-button:hover { /* 鼠标移入按钮范围时改变颜色 */
        background: #5599FF;
    }
</style>
@section('content')
    @include('layouts._headerElse')
    <section class="ftco-section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-10">
                    <div class="row model-detail d-mf-flex align-items-center">
                        <div class="col-md-6 ftco-animate">
                            <div class="carousel-model owl-carousel">
                                @foreach($data['product_images'] as $item)
                                    <div class="items">
                                        <img src="{{$url .'/'.$item['detail_image']}}" class="img-fluid"
                                             alt="Colorlib Template">
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="col-md-1"></div>
                        <div class="col-md-5 model-info ftco-animate">
                            <h3 class="mb-4">{{$data['title']}}</h3>
                            <p><span>模特编号</span> <span>{{$data['product_auxiliaries']['product_id']}}</span></p>
                            <p><span>身高</span> <span>{{$data['product_auxiliaries']['height']}}</span></p>
                            <p><span>胸围</span> <span>{{$data['product_auxiliaries']['bust']}}</span></p>
                            <p><span>腰围</span> <span>{{$data['product_auxiliaries']['waist']}}</span></p>
                            <p><span>臀围</span> <span>{{$data['product_auxiliaries']['hips']}}</span></p>
                            <p><span>衣服尺寸</span> <span>{{$data['product_auxiliaries']['dress']}}</span></p>
                            <p><span>鞋子大小</span> <span>{{$data['product_auxiliaries']['shoe']}}</span></p>
                            <p><span>头发颜色</span> <span>{{$data['product_auxiliaries']['hair_colour']}}</span></p>
                            <p><span>眼睛颜色</span> <span>{{$data['product_auxiliaries']['eyes']}}</span></p>
                            <p class="mt-4"><a href="JavaScript:void(0)" onclick="openDialog()"
                                               class="btn btn-primary py-3 px-4">Like this model</a></p>
                        </div>
                    </div>
                    <div class="row no-gutters mt-5">
                        @foreach($data['product_photos'] as $item)
                            <div class="col-md-6 col-lg-3 fto-animate">
                                <img src="{{$url .'/'.$item['photo']}}" class="img-fluid" alt="Colorlib Template">
                            </div>
                        @endforeach
                    </div>

                </div>
            </div>
        </div>
    </section>
    <div id="light" class="white_content">
        <img src="{{$common['contact']['wechat_code']}}" width="270" height="250">
        <div style="width: 100%;margin: 0 auto">请扫描二维码联系我们</div>
        <button onclick="closeDialog()" class="login-button">确定</button>
    </div>
    <button id="fade" class="black_overlay" onclick="closeDialog()">
    </button>
@endsection
@section('link-js')
    <style>
        .fto-animate:nth-child(even) {
            margin-left: 5px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
        })

        function openDialog() {
            document.getElementById('light').style.display = 'block';
            document.getElementById('fade').style.display = 'block'
        }

        function closeDialog() {
            document.getElementById('light').style.display = 'none';
            document.getElementById('fade').style.display = 'none'
        }
    </script>
@endsection
